<template>
  <div class="new-canteen-component" @click="handlerClick">
    <div class="new-left">
      <div class="show-number">
        <strong>{{ props.showInfo.currentRate }}</strong
        >人
      </div>
      <div class="text">
        此时间 <span class="textColor">累计</span> 已刷卡人数
      </div>
    </div>
    <div class="new-center"></div>
    <div class="new-right">
      <span class="position">
        <img src="../assets/img/icon-location.png" alt="" />
        <span>{{ props.showInfo.indexPosition }}</span>
      </span>
      <div class="loading" v-if="props.showInfo.timer">
        <img src="../assets/img/loading.svg" alt="" />
      </div>
      <span class="wait-time">预计等待{{ props.showInfo.times }}分钟</span>
    </div>
  </div>
</template>
<script>
import { computed, defineComponent, onMounted, onUnmounted, reactive, ref } from "@vue/runtime-core";
// import { SetDashItem } from "@/api/index";
export default defineComponent({
  name: "selectList",
  props: {
    showInfo: {
      type: Object,
    },
    close: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, { emit }) {
    const handlerClick = () => {
      // console.log(props.showInfo);
      emit("handlerParent", props.showInfo.id);
    };
    let timer = ref(null);
    let timerList = reactive([]);
    // 处理定时器
    onMounted(() => {
      timer = setInterval(() => {
        if (props.showInfo.timeCount == 0 || props.showInfo.timeCount < 0) {
          emit("stopInterval", { id: props.showInfo.id });
          clearInterval(timer);
        } else {
          emit("intervalCount", { id: props.showInfo.id });
        }
      }, 1000);
      timerList.push(timer);
    });
    // 组件销毁事件
    onUnmounted(() => {
      for (let i = 0; i < timerList.length; i++) {
        const _i = timerList[i];
        clearInterval(_i);
      }
    });
    return {
      props,
      handlerClick,
    };
  },
});
</script>
<style lang="less" scoped>
.select-canteen_card {
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  .select-canteen_card_header {
    height: 66px;
    background: #59adf8;
    display: flex;
    align-items: center;
    .select-canteen_card_header_left {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      img {
        width: 26px;
        height: 26px;
        font-size: 16px;
        // margin-right: 8px;
      }
      .van-icon-location-o {
        margin-right: 4px;
      }
    }
    .select-canteen_card_header_right {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        background: #fff;
        padding: 3px 10px;
        border-radius: 16px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
  .select-canteen_card_bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 136px;
    .select-canteen_card_bottom_left {
      width: 65%;
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        padding: 10px;
      }
    }
    .select-canteen_card_bottom_right {
      width: 35%;
    }
  }
}
.textColor {
  color: orange;
}
.font14 {
  font-size: 14px;
}
.new-canteen-component {
  // width: 100%;
  margin: 0 12px;
  margin-bottom: 50px;
  // background: red;
  height: 260px;
  border: 1px solid #ccc;
  border-radius: 20px;
  display: flex;
  overflow: hidden;
  .new-left {
    width: 60%;
    // background: pink;
    // border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    .show-number {
      width: 132px;
      height: 132px;
      border-radius: 50%;
      background: #2263b6;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      strong {
        font-size: 40px;
      }
    }
    .text {
      padding-top: 32px;
      font-size: 30px;
    }
  }
  .new-right {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 20px;
    margin-top: 10px;
    .position {
      height: 42px;
      background: #2263b6;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      border-radius: 21px;
      color: #fff;
      img {
        width: 20px;
        margin-right: 10px;
      }
      span {
        font-size: 20px;
      }
    }
    .wait-time {
      line-height: 22px;
      font-size: 30px;
    }
    .loading {
      width: 90px;
      padding: 20px;
      img {
        width: 100%;
      }
    }
  }
  .new-center {
    // width: 1%;
    width: 1px;
    background: #ccc;
    margin: 20px;
  }
}
</style>
